<template>
	<view class="good-item-container" >
    <!-- 左侧商品图片 -->
		<view class="goodimg-left-wrapper">
		  <image class="goodimg" :src="goodInfoObj.goods_small_logo || defaultPic"></image>
		</view>
    <!-- 右侧商品信息 -->
    <view class="goodinfo-right-wrapper">
      <!-- 商品名称 -->
      <view class="good-title">
        <text>{{goodInfoObj.goods_name}}</text>
      </view>
      <!-- 商品价格 -->
      <view class="good-bottom">
         <text class="good-price">￥ {{goodInfoObj.goods_price | formPrice}}</text>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
    props: {
      goodInfoObj: {
        type: Object,
        default: {}
      }
    },
		data() {
			return {
				// 默认的空图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			}
		},
    filters: {
      formPrice (value) {
        return value.toFixed(2)
      }
    }
	}
</script>

<style lang="scss">
.good-item-container {
  display: flex;
  padding: 16rpx;
  border-bottom: 2rpx solid #efefef;
  .goodimg-left-wrapper {
    margin-right: 14rpx;
    .goodimg {
      width: 240rpx;
      height: 240rpx;
    }
  }
  .goodinfo-right-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 14rpx 0;
     .good-title {
       font-size: 26rpx;
     }
     .good-price {
       font-size: 32rpx;
       color: #C00000;
       font-weight: 600;
     }
   }
}
</style>

